<template>
  <!-- 高德地图组件 -->
  <div id="container"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
// 引入图标
import icon from "@/assets/flashIcon.png";
// 引入地图上充电站图片
import stationImg from "@/assets/station.jpg";

// 引入高德地图加载器
import AMapLoader from "@amap/amap-jsapi-loader";
// 引入 map 地图数据
import { mapListApi } from "@/api/map";
let map: any = null; // 地图实例
const markersData = ref<any>([]); // 存储地图标记数据
onMounted(() => {
  AMapLoader.load({
    key: "bbc301abf4ff0a13107d4887bb4d0460", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap: any) => {
      map = new AMap.Map("container", {
        zoom: 5, //级别
        center: [116.39, 39.9], //中心点坐标
      });

      // 循环添加自定义地图标记
      // 调用 mapListApi 获取地图标记数据
      mapListApi().then(({ data }) => {
        markersData.value = data;
        // 创建信息窗体
        const infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -30), // 信息窗体位置偏移量
        });

        // 循环添加标记
        markersData.value.forEach((item: any) => {
          const marker = new AMap.Marker({
            position: item.position, //位置
            title: item.name, //标题
            icon: icon, // 图标
          });

          // 点击标记显示信息窗体
          marker.on("click", () => {
            infoWindow.setContent(`
              <div style="display: flex; align-items: center; padding:10px;">
                <div>
                  <img src="${stationImg}" style="width:200px;" />
                </div>
                <div style="width:180px;line-height:30px; margin-left:20px;">
                  <h3>${item.title}</h3>
                  <p>充电桩数量: ${item.count}</p>
                  <p>充电桩状态: <span style="color:blue;">${
                    item.status === 1 ? "使用中" : "维护中"
                  }</span> </p>
                </div>
              </div>
            `);
            infoWindow.open(map, marker.getPosition());
          });
          map.add(marker); // 添加到地图上
        });
      });
    })
    .catch((e: any) => {
      console.log(e);
    });
});

onUnmounted(() => {
  // 销毁地图实例
  if (map) {
    map.destroy();
    map = null;
  }
});
</script>

<style scoped lang="less">
#container {
  width: 100%;
  height: 80vh;
}
</style>
